<template>
	<view>
		<view class="" v-if="cartsList.length">
			<view class="flex p32" v-for="(item, index) in cartsList" :key="item.id">
				<u-checkbox-group>
					<u-checkbox v-model="item.is_checked" shape="circle" @change="checkboxChange(item.id)"></u-checkbox>
				</u-checkbox-group> 
				<view class="mx12">
					<image :src="item.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
				</view>
				<view class="flex flex-col carts-right">
					<view class="">
						<view class="">{{item.goods.title}}</view>
						<view class="">{{item.goods.description}}</view>
					</view>
					<view class="flex items-center">
						<view class="color-f00 mr12">￥{{item.goods.price}}</view>
						<u-number-box v-model="item.num" @change="valChange" class="mr12"></u-number-box>
						<u-icon name="trash" color="#f00" size="24" @click="deleteGoods(item.id)"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex fixed_bottom">
				<view class="flex ">
					<u-checkbox-group>
						<u-checkbox v-model="checkedAll" shape="circle" label="全选"></u-checkbox>
					</u-checkbox-group>
					<view class="ml12">合计￥</view>
				</view>
				<view class="btn-account btn-primary" @click="submitPreview">去结算</view>
			</view>
		</view>
		<view class="" v-else>
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		</view>
		<u-divider text="为您推荐一下商品"></u-divider>
	</view>
</template>

<script>
import { cartsList, cartsChecked, cartsRemove, cartsNum} from '@/config/api'
	export default {
		data() {
			return {
				cartsList: [],
				checkedAll: false
			}
		},
		onLoad() {
			this.getCarts() 
		},
		methods: {
			submitPreview() {
				this.$u.route({
					url: "pages/orders/preview"
				})
			},
			deleteGoods(id) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: res => {
						if (res.confirm) {
							this.cartsRemove(id)
						}
					},
					cancel: res => {
						console.log(res)
					}
				})
			},
			close() {},
			async cartsRemove(id) {
				const res = await cartsRemove(id)
				this.getCarts()
			},
			async checkboxChange(id) {
				const res = await cartsChecked([id])
				console.log(res)
			},
			valChange(e){
				console.log(e)
			},
			/**
     * 获取购物车数据
     */
    async getCarts() {
      if(this.$u.utils.isLogin()) {
				const params = {
					include: 'goods'
				}
        const res = await cartsList({params})
        this.cartsList = res.data
      }
    },
		}
	}
</script>

<style lang="scss" scoped>
.fixed_bottom {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 90rpx;
	/* #endif */
	left: 0;right: 0;
	width: 100%;
	height: 80rpx;
	padding: 0 32rpx;
	z-index: 2;

	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
.btn-account {
  
}
.carts-right {
	height: 200rpx;
	justify-content: space-around;
}
</style>
